<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#6a11cb">
    <title>专业图片学习系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        :root {
            --primary: #6a11cb;
            --secondary: #2575fc;
            --success: #00b09b;
            --danger: #ff416c;
            --warning: #ff8a00;
            --info: #3498db;
            --dark: #2c3e50;
            --light: #f8f9fa;
        }
        
        body {
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: #333;
            min-height: 100vh;
            padding: 20px 15px 80px;
            overflow-x: hidden;
            background-attachment: fixed;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            position: relative;
            z-index: 10;
        }
        
        header {
            text-align: center;
            padding: 20px 0 25px;
            color: white;
            position: relative;
        }
        
        .logo {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--success), var(--info));
            border-radius: 50%;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            color: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        h1 {
            font-size: 2.2rem;
            margin-bottom: 10px;
            font-weight: 700;
            letter-spacing: -0.5px;
            text-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            max-width: 300px;
            margin: 0 auto;
            line-height: 1.5;
            text-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        
        .stats-container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 25px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 18px;
            padding: 20px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }
        
        .stat-card {
            background: white;
            border-radius: 15px;
            padding: 15px;
            text-align: center;
            flex: 1;
            margin: 0 5px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-card h3 {
            font-size: 0.95rem;
            color: #555;
            margin-bottom: 8px;
        }
        
        .stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--secondary);
        }
        
        .progress-container {
            margin-bottom: 25px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 18px;
            padding: 20px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }
        
        .progress-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            color: white;
            font-weight: 600;
        }
        
        .progress-bar {
            height: 18px;
            background: rgba(255,255,255,0.2);
            border-radius: 9px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(to right, var(--success), var(--info));
            border-radius: 9px;
            width: 0%;
            transition: width 1s ease;
            position: relative;
        }
        
        .progress-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(255,255,255,0.2) 25%, 
                                        transparent 25%, 
                                        transparent 50%, 
                                        rgba(255,255,255,0.2) 50%, 
                                        rgba(255,255,255,0.2) 75%, 
                                        transparent 75%);
            background-size: 30px 30px;
            animation: moveStripes 2s linear infinite;
        }
        
        .image-container {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.25);
            margin-bottom: 25px;
            position: relative;
            min-height: 320px;
            display: flex;
            align-items: center;
            justify-content: center;
            touch-action: none;
            user-select: none;
        }
        
        .image-placeholder {
            text-align: center;
            padding: 40px 20px;
            color: #777;
        }
        
        .image-placeholder i {
            font-size: 4rem;
            margin-bottom: 20px;
            color: var(--primary);
            opacity: 0.3;
        }
        
        #current-image {
            max-width: 100%;
            max-height: 400px;
            display: none;
            object-fit: contain;
            transition: transform 0.1s ease-out;
        }
        
        .image-info {
            padding: 15px;
            background: rgba(255,255,255,0.9);
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            font-size: 0.9rem;
            color: #555;
            display: flex;
            justify-content: space-between;
            z-index: 10;
        }
        
        .zoom-controls {
            position: absolute;
            top: 15px;
            right: 15px;
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .zoom-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,0.8);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: var(--dark);
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
            cursor: pointer;
        }
        
        .actions {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 25px;
        }
        
        .action-btn {
            flex: 1;
            padding: 18px 10px;
            border-radius: 15px;
            border: none;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .remember-btn {
            background: linear-gradient(to right, var(--success), #96c93d);
            color: white;
        }
        
        .forget-btn {
            background: linear-gradient(to right, var(--danger), #ff4b2b);
            color: white;
        }
        
        .edit-btn {
            background: linear-gradient(to right, var(--warning), #ff6b00);
            color: white;
        }
        
        .action-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
        }
        
        .action-btn:active {
            transform: translateY(1px);
        }
        
        .completion-message {
            text-align: center;
            padding: 30px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
            margin-bottom: 25px;
            display: none;
        }
        
        .completion-message i {
            font-size: 4rem;
            color: var(--success);
            margin-bottom: 20px;
        }
        
        .completion-message h2 {
            color: #27ae60;
            margin-bottom: 15px;
        }
        
        .completion-message p {
            color: #7f8c8d;
            line-height: 1.6;
        }
        
        .file-upload-container {
            text-align: center;
            margin: 25px 0;
        }
        
        .file-upload-label {
            display: inline-block;
            padding: 16px 35px;
            background: white;
            border-radius: 15px;
            font-weight: 600;
            color: var(--dark);
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(0,0,0,0.15);
            transition: all 0.3s ease;
            border: 2px dashed var(--info);
        }
        
        .file-upload-label:hover {
            background: #f8f9fa;
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        }
        
        #file-upload {
            display: none;
        }
        
        .import-container {
            text-align: center;
            margin-top: 15px;
        }
        
        .import-btn {
            display: inline-block;
            padding: 14px 25px;
            background: linear-gradient(to right, var(--info), #2980b9);
            color: white;
            border-radius: 15px;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }
        
        .import-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.25);
        }
        
        #import-data {
            display: none;
        }
        
        .system-actions {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .system-btn {
            flex: 1;
            padding: 16px;
            border-radius: 15px;
            border: none;
            background: white;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.15);
            transition: all 0.3s ease;
            color: var(--dark);
        }
        
        .system-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        }
        
        .download-btn {
            background: linear-gradient(to right, #9b59b6, #8e44ad);
            color: white;
        }
        
        .reset-btn {
            background: linear-gradient(to right, var(--danger), #c0392b);
            color: white;
        }
        
        .settings-btn {
            background: linear-gradient(to right, #3498db, #2980b9);
            color: white;
        }
        
        .db-status {
            text-align: center;
            color: white;
            font-size: 0.9rem;
            margin-top: 15px;
            opacity: 0.8;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        
        /* 响应式设计 */
        @media (max-width: 480px) {
            h1 {
                font-size: 1.8rem;
            }
            
            .subtitle {
                font-size: 1rem;
            }
            
            .stat-value {
                font-size: 1.5rem;
            }
            
            .action-btn {
                font-size: 1rem;
                padding: 16px 8px;
            }
            
            .system-btn {
                padding: 14px;
                font-size: 0.95rem;
            }
            
            .file-upload-label, .import-btn {
                padding: 14px 25px;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes moveStripes {
            0% { background-position: 0 0; }
            100% { background-position: 30px 0; }
        }
        
        .fade-in {
            animation: fadeIn 0.6s ease forwards;
        }
        
        /* 装饰元素 */
        .decoration {
            position: fixed;
            z-index: 1;
            border-radius: 50%;
            background: rgba(255,255,255,0.15);
        }
        
        .circle1 {
            width: 300px;
            height: 300px;
            top: -150px;
            left: -150px;
        }
        
        .circle2 {
            width: 200px;
            height: 200px;
            bottom: -100px;
            right: -100px;
        }
        
        /* 加载指示器 */
        .loader {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .loader-spinner {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top: 5px solid white;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 数据库信息 */
        .db-info {
            background: rgba(255,255,255,0.15);
            border-radius: 12px;
            padding: 10px 15px;
            color: white;
            font-size: 0.85rem;
            margin-top: 15px;
            text-align: center;
        }
        
        /* 设置面板 */
        .settings-panel {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.7);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            display: none;
        }
        
        .settings-content {
            background: white;
            border-radius: 20px;
            padding: 30px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
            position: relative;
        }
        
        .settings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }
        
        .settings-header h2 {
            color: var(--dark);
            font-size: 1.8rem;
        }
        
        .close-settings {
            background: none;
            border: none;
            font-size: 1.5rem;
            color: #777;
            cursor: pointer;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--dark);
        }
        
        .form-group input, .form-group select {
            width: 100%;
            padding: 14px;
            border: 1px solid #ddd;
            border-radius: 12px;
            font-size: 1rem;
        }
        
        .save-settings-btn {
            width: 100%;
            padding: 16px;
            background: linear-gradient(to right, var(--success), #00c9a7);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            margin-top: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.15);
        }
        
        .path-preview {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 12px;
            margin-top: 10px;
            font-size: 0.9rem;
            border: 1px dashed #ddd;
        }
        
        /* 路径选择器 */
        .path-selector {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
        
        .folder-option {
            flex: 1;
            padding: 12px;
            background: #f0f5ff;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.2s ease;
        }
        
        .folder-option.selected {
            border-color: var(--info);
            background: #e1ebff;
        }
        
        .folder-option i {
            font-size: 1.8rem;
            color: var(--info);
            margin-bottom: 8px;
        }
        
        .custom-path-input {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        .custom-path-input input {
            flex: 1;
        }
        
        .custom-path-input button {
            padding: 0 20px;
            background: var(--info);
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
        }
        
        /* 编辑面板 */
        .edit-panel {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.85);
            z-index: 2000;
            display: flex;
            flex-direction: column;
            display: none;
        }
        
        .edit-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background: rgba(0,0,0,0.7);
            color: white;
        }
        
        .edit-tools {
            display: flex;
            gap: 10px;
            padding: 15px;
            background: rgba(0,0,0,0.7);
            color: white;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .tool-btn {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .tool-btn.active {
            background: var(--info);
            transform: scale(1.1);
        }
        
        .edit-area {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: auto;
            padding: 20px;
        }
        
        #edit-canvas {
            max-width: 100%;
            max-height: 100%;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            background: white;
        }
        
        .edit-actions {
            display: flex;
            justify-content: space-between;
            padding: 15px;
            background: rgba(0,0,0,0.7);
            gap: 10px;
        }
        
        .edit-action-btn {
            flex: 1;
            padding: 15px;
            border-radius: 12px;
            border: none;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.2s ease;
        }
        
        .save-edit-btn {
            background: linear-gradient(to right, var(--success), #00c9a7);
            color: white;
        }
        
        .cancel-edit-btn {
            background: linear-gradient(to right, var(--danger), #ff4b2b);
            color: white;
        }
        
        .edit-controls {
            display: flex;
            flex-direction: column;
            gap: 15px;
            padding: 15px;
            background: rgba(0,0,0,0.7);
            align-items: center;
        }
        
        .color-picker-container {
            display: flex;
            align-items: center;
            gap: 10px;
            color: white;
        }
        
        .color-preview {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid white;
        }
        
        .tool-size-container {
            display: flex;
            align-items: center;
            gap: 10px;
            color: white;
        }
        
        .tool-size {
            width: 120px;
        }
        
        .text-input-container {
            display: none;
            padding: 15px;
            background: rgba(0,0,0,0.7);
            text-align: center;
        }
        
        .text-input {
            width: 80%;
            padding: 12px;
            border-radius: 8px;
            border: none;
            font-size: 1rem;
            margin-bottom: 10px;
        }
        
        .add-text-btn {
            padding: 10px 20px;
            background: var(--info);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 装饰元素 -->
    <div class="decoration circle1"></div>
    <div class="decoration circle2"></div>
    
    <!-- 设置面板 -->
    <div class="settings-panel" id="settings-panel">
        <div class="settings-content">
            <div class="settings-header">
                <h2><i class="fas fa-cog"></i> 系统设置</h2>
                <button class="close-settings" id="close-settings">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="form-group">
                <label>保存路径设置</label>
                <div class="path-selector">
                    <div class="folder-option" data-path="默认路径">
                        <i class="fas fa-folder"></i>
                        <div>默认路径</div>
                    </div>
                    <div class="folder-option" data-path="学习资料">
                        <i class="fas fa-book"></i>
                        <div>学习资料</div>
                    </div>
                    <div class="folder-option" data-path="图片收藏">
                        <i class="fas fa-heart"></i>
                        <div>图片收藏</div>
                    </div>
                </div>
                
                <div class="custom-path-input">
                    <input type="text" id="custom-path" placeholder="输入自定义路径">
                    <button id="set-custom-path">应用</button>
                </div>
                
                <div class="path-preview">
                    当前保存路径: <span id="current-path-preview">默认路径</span>
                </div>
            </div>
            
            <div class="form-group">
                <label>自动保存间隔</label>
                <select id="save-interval">
                    <option value="1">1分钟</option>
                    <option value="5" selected>5分钟</option>
                    <option value="10">10分钟</option>
                    <option value="30">30分钟</option>
                    <option value="60">60分钟</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>图片显示质量</label>
                <select id="image-quality">
                    <option value="high">高质量</option>
                    <option value="medium" selected>中等质量</option>
                    <option value="low">低质量</option>
                </select>
            </div>
            
            <button class="save-settings-btn" id="save-settings-btn">
                <i class="fas fa-save"></i> 保存设置
            </button>
        </div>
    </div>
    
    <!-- 图片编辑面板 -->
    <div class="edit-panel" id="edit-panel">
        <div class="edit-header">
            <h2><i class="fas fa-edit"></i> 编辑图片</h2>
            <button id="close-edit">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <div class="edit-tools">
            <button class="tool-btn" id="tool-pencil" title="画笔">
                <i class="fas fa-pencil-alt"></i>
            </button>
            <button class="tool-btn" id="tool-text" title="添加文字">
                <i class="fas fa-font"></i>
            </button>
            <button class="tool-btn" id="tool-arrow" title="箭头">
                <i class="fas fa-arrow-right"></i>
            </button>
            <button class="tool-btn" id="tool-rect" title="矩形">
                <i class="fas fa-square"></i>
            </button>
            <button class="tool-btn" id="tool-circle" title="圆形">
                <i class="fas fa-circle"></i>
            </button>
            <button class="tool-btn" id="tool-eraser" title="橡皮擦">
                <i class="fas fa-eraser"></i>
            </button>
        </div>
        
        <div class="edit-controls">
            <div class="color-picker-container">
                <label for="color-picker">颜色:</label>
                <input type="color" id="color-picker" value="#ff0000">
                <div class="color-preview" id="color-preview" style="background-color: #ff0000;"></div>
            </div>
            
            <div class="tool-size-container">
                <label for="tool-size">粗细:</label>
                <input type="range" id="tool-size" class="tool-size" min="1" max="20" value="5">
            </div>
        </div>
        
        <div class="text-input-container" id="text-input-container">
            <input type="text" class="text-input" id="text-input" placeholder="输入文本内容">
            <button class="add-text-btn" id="add-text-btn">添加文本</button>
        </div>
        
        <div class="edit-area">
            <canvas id="edit-canvas"></canvas>
        </div>
        
        <div class="edit-actions">
            <button class="edit-action-btn cancel-edit-btn" id="cancel-edit-btn">
                <i class="fas fa-times"></i> 取消
            </button>
            <button class="edit-action-btn save-edit-btn" id="save-edit-btn">
                <i class="fas fa-save"></i> 保存编辑
            </button>
        </div>
    </div>
    
    <div class="container">
        <header class="fade-in">
            <div class="logo">
                <i class="fas fa-brain"></i>
            </div>
            <h1>专业图片学习系统</h1>
            <p class="subtitle">自定义保存路径，支持手势缩放和编辑</p>
        </header>
        
        <div class="stats-container fade-in" style="animation-delay: 0.1s;">
            <div class="stat-card">
                <h3>总图片</h3>
                <div class="stat-value" id="total-count">0</div>
            </div>
            <div class="stat-card">
                <h3>已记住</h3>
                <div class="stat-value" id="remembered-count">0</div>
            </div>
            <div class="stat-card">
                <h3>未记住</h3>
                <div class="stat-value" id="unremembered-count">0</div>
            </div>
        </div>
        
        <div class="progress-container fade-in" style="animation-delay: 0.15s;">
            <div class="progress-header">
                <span>学习进度</span>
                <span id="progress-percent">0%</span>
            </div>
            <div class="progress-bar">
                <div class="progress-fill" id="progress-fill"></div>
            </div>
        </div>
        
        <div class="image-container fade-in" style="animation-delay: 0.2s;">
            <div class="image-placeholder" id="image-placeholder">
                <i class="fas fa-cloud-upload-alt"></i>
                <p>请上传图片开始学习</p>
            </div>
            <img id="current-image" alt="当前学习图片">
            
            <!-- 缩放控制 -->
            <div class="zoom-controls">
                <button class="zoom-btn" id="zoom-in-btn">
                    <i class="fas fa-search-plus"></i>
                </button>
                <button class="zoom-btn" id="zoom-out-btn">
                    <i class="fas fa-search-minus"></i>
                </button>
                <button class="zoom-btn" id="reset-zoom-btn">
                    <i class="fas fa-sync-alt"></i>
                </button>
            </div>
            
            <div class="image-info" id="image-info" style="display: none;">
                <span id="image-name">未命名图片</span>
                <span id="image-size">0 KB</span>
            </div>
        </div>
        
        <div class="loader" id="loader">
            <div class="loader-spinner"></div>
            <p>正在加载图片数据...</p>
        </div>
        
        <div class="actions fade-in" style="animation-delay: 0.3s;">
            <button class="action-btn remember-btn" id="remember-btn">
                <i class="fas fa-check-circle"></i> 已记住
            </button>
            <button class="action-btn forget-btn" id="forget-btn">
                <i class="fas fa-times-circle"></i> 未记住
            </button>
            <button class="action-btn edit-btn" id="edit-btn">
                <i class="fas fa-edit"></i> 编辑图片
            </button>
        </div>
        
        <div class="completion-message fade-in" id="completion-message">
            <i class="fas fa-trophy"></i>
            <h2>学习完成！</h2>
            <p>您已经完成了所有图片的学习，已记住的图片已归档。</p>
            <p>您可以添加更多图片继续学习。</p>
        </div>
        
        <div class="file-upload-container fade-in" style="animation-delay: 0.4s;">
            <label for="file-upload" class="file-upload-label">
                <i class="fas fa-plus"></i> 添加图片 (支持多选)
            </label>
            <input type="file" id="file-upload" accept="image/*" multiple>
        </div>
        
        <div class="import-container fade-in" style="animation-delay: 0.45s;">
            <label for="import-data" class="import-btn">
                <i class="fas fa-file-import"></i> 导入学习数据
            </label>
            <input type="file" id="import-data" accept=".json">
        </div>
        
        <div class="system-actions fade-in" style="animation-delay: 0.5s;">
            <button class="system-btn download-btn" id="download-btn">
                <i class="fas fa-download"></i> 导出数据
            </button>
            <button class="system-btn settings-btn" id="settings-btn">
                <i class="fas fa-cog"></i> 系统设置
            </button>
            <button class="system-btn reset-btn" id="reset-btn">
                <i class="fas fa-redo"></i> 重置系统
            </button>
        </div>
        
        <div class="db-info fade-in" style="animation-delay: 0.6s;">
            <p><i class="fas fa-database"></i> 当前使用IndexedDB存储，支持上千张图片</p>
            <p id="db-status">数据库状态: 未初始化</p>
            <p>保存路径: <span id="current-path-display">默认路径</span></p>
        </div>
    </div>

    <script>
        // 图片管理系统状态
        const imageManager = {
            db: null,
            allImages: [],         // 所有图片
            rememberedImages: [],  // 已记住的图片
            unrememberedImages: [], // 未记住的图片
            currentImageIndex: 0,   // 当前显示的图片索引
            currentScale: 1,        // 当前缩放比例
            savePath: "默认路径",    // 当前保存路径
            settings: {
                saveInterval: 5,    // 自动保存间隔（分钟）
                imageQuality: "medium" // 图片显示质量
            },
            
            // 初始化数据库
            initDB: function() {
                return new Promise((resolve, reject) => {
                    const request = indexedDB.open('ImageLearningDB', 5);
                    
                    request.onerror = (event) => {
                        console.error('数据库打开失败:', event.target.error);
                        reject(event.target.error);
                        document.getElementById('db-status').textContent = '数据库状态: 初始化失败';
                    };
                    
                    request.onsuccess = (event) => {
                        this.db = event.target.result;
                        console.log('数据库打开成功');
                        document.getElementById('db-status').textContent = '数据库状态: 已连接';
                        
                        // 加载设置
                        this.loadSettings();
                        resolve();
                    };
                    
                    request.onupgradeneeded = (event) => {
                        const db = event.target.result;
                        
                        // 创建图片存储空间
                        if (!db.objectStoreNames.contains('images')) {
                            const store = db.createObjectStore('images', { keyPath: 'id' });
                            store.createIndex('remembered', 'remembered', { unique: false });
                            store.createIndex('timestamp', 'timestamp', { unique: false });
                            console.log('创建images存储空间');
                        }
                        
                        // 创建状态存储空间
                        if (!db.objectStoreNames.contains('status')) {
                            const statusStore = db.createObjectStore('status', { keyPath: 'name' });
                            statusStore.add({ name: 'currentIndex', value: 0 });
                            console.log('创建status存储空间');
                        }
                        
                        // 创建设置存储空间
                        if (!db.objectStoreNames.contains('settings')) {
                            const settingsStore = db.createObjectStore('settings', { keyPath: 'name' });
                            settingsStore.add({ name: 'savePath', value: '默认路径' });
                            settingsStore.add({ name: 'saveInterval', value: 5 });
                            settingsStore.add({ name: 'imageQuality', value: 'medium' });
                        }
                    };
                });
            },
            
            // 加载设置
            loadSettings: function() {
                if (!this.db) return;
                
                const transaction = this.db.transaction(['settings'], 'readonly');
                const store = transaction.objectStore('settings');
                
                // 加载保存路径
                const pathRequest = store.get('savePath');
                pathRequest.onsuccess = (e) => {
                    if (e.target.result) {
                        this.savePath = e.target.result.value;
                        document.getElementById('current-path-display').textContent = this.savePath;
                        document.getElementById('current-path-preview').textContent = this.savePath;
                    }
                };
                
                // 加载保存间隔
                const intervalRequest = store.get('saveInterval');
                intervalRequest.onsuccess = (e) => {
                    if (e.target.result) {
                        this.settings.saveInterval = e.target.result.value;
                        document.getElementById('save-interval').value = this.settings.saveInterval;
                    }
                };
                
                // 加载图片质量
                const qualityRequest = store.get('imageQuality');
                qualityRequest.onsuccess = (e) => {
                    if (e.target.result) {
                        this.settings.imageQuality = e.target.result.value;
                        document.getElementById('image-quality').value = this.settings.imageQuality;
                    }
                };
            },
            
            // 保存设置
            saveSettings: function() {
                if (!this.db) return;
                
                const transaction = this.db.transaction(['settings'], 'readwrite');
                const store = transaction.objectStore('settings');
                
                // 保存路径
                store.put({ name: 'savePath', value: this.savePath });
                
                // 保存间隔
                store.put({ name: 'saveInterval', value: this.settings.saveInterval });
                
                // 保存图片质量
                store.put({ name: 'imageQuality', value: this.settings.imageQuality });
                
                // 更新显示
                document.getElementById('current-path-display').textContent = this.savePath;
            },
            
            // 设置保存路径
            setSavePath: function(path) {
                this.savePath = path;
                this.saveSettings();
                document.getElementById('current-path-preview').textContent = this.savePath;
                
                // 更新选中的路径
                document.querySelectorAll('.folder-option').forEach(option => {
                    option.classList.remove('selected');
                    if (option.dataset.path === path) {
                        option.classList.add('selected');
                    }
                });
            },
            
            // 加载所有数据
            loadAllData: function() {
                document.getElementById('loader').style.display = 'block';
                
                return new Promise((resolve, reject) => {
                    if (!this.db) {
                        reject('数据库未初始化');
                        return;
                    }
                    
                    const transaction = this.db.transaction(['images', 'status'], 'readonly');
                    const imageStore = transaction.objectStore('images');
                    const statusStore = transaction.objectStore('status');
                    
                    // 加载所有图片
                    const imageRequest = imageStore.getAll();
                    
                    imageRequest.onsuccess = (event) => {
                        const allImages = event.target.result || [];
                        this.allImages = allImages;
                        
                        // 分离已记住和未记住的图片
                        this.rememberedImages = allImages.filter(img => img.remembered);
                        this.unrememberedImages = allImages.filter(img => !img.remembered);
                        
                        // 加载当前图片索引
                        const indexRequest = statusStore.get('currentIndex');
                        
                        indexRequest.onsuccess = (e) => {
                            this.currentImageIndex = e.target.result ? e.target.result.value : 0;
                            
                            // 确保索引在有效范围内
                            if (this.unrememberedImages.length > 0) {
                                this.currentImageIndex = Math.min(this.currentImageIndex, this.unrememberedImages.length - 1);
                            }
                            
                            this.updateUI();
                            
                            if (this.unrememberedImages.length > 0) {
                                this.showCurrentImage();
                            } else if (this.allImages.length > 0) {
                                document.getElementById('completion-message').style.display = 'block';
                            }
                            
                            document.getElementById('loader').style.display = 'none';
                            resolve();
                        };
                        
                        indexRequest.onerror = (e) => {
                            console.error('加载当前索引失败:', e.target.error);
                            this.currentImageIndex = 0;
                            resolve();
                        };
                    };
                    
                    imageRequest.onerror = (event) => {
                        console.error('加载图片失败:', event.target.error);
                        reject(event.target.error);
                    };
                });
            },
            
            // 保存当前状态到数据库
            saveCurrentState: function() {
                if (!this.db) return;
                
                const transaction = this.db.transaction(['status'], 'readwrite');
                const statusStore = transaction.objectStore('status');
                
                // 保存当前图片索引
                statusStore.put({ name: 'currentIndex', value: this.currentImageIndex });
            },
            
            // 添加图片到系统
            addImage: function(file) {
                return new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    
                    reader.onload = (e) => {
                        const imageData = {
                            id: Date.now() + Math.floor(Math.random() * 1000),
                            name: file.name,
                            size: (file.size / 1024).toFixed(1) + ' KB',
                            data: e.target.result,
                            timestamp: new Date().toISOString(),
                            remembered: false,
                            savePath: this.savePath // 保存当前路径
                        };
                        
                        // 添加到数据库
                        const transaction = this.db.transaction(['images'], 'readwrite');
                        const store = transaction.objectStore('images');
                        
                        const request = store.add(imageData);
                        
                        request.onsuccess = () => {
                            // 添加到内存
                            this.allImages.push(imageData);
                            this.unrememberedImages.push(imageData);
                            
                            this.updateUI();
                            
                            // 如果是第一张图片，显示它
                            if (this.allImages.length === 1) {
                                this.showCurrentImage();
                            }
                            
                            resolve();
                        };
                        
                        request.onerror = (event) => {
                            console.error('添加图片失败:', event.target.error);
                            reject(event.target.error);
                        };
                    };
                    
                    reader.readAsDataURL(file);
                });
            },
            
            // 显示当前图片
            showCurrentImage: function() {
                if (this.unrememberedImages.length === 0) {
                    document.getElementById('image-placeholder').style.display = 'block';
                    document.getElementById('current-image').style.display = 'none';
                    document.getElementById('image-info').style.display = 'none';
                    document.getElementById('completion-message').style.display = 'block';
                    return;
                }
                
                document.getElementById('completion-message').style.display = 'none';
                
                const currentImage = this.unrememberedImages[this.currentImageIndex];
                const imgElement = document.getElementById('current-image');
                const infoElement = document.getElementById('image-info');
                
                imgElement.src = currentImage.data;
                imgElement.style.display = 'block';
                document.getElementById('image-placeholder').style.display = 'none';
                
                document.getElementById('image-name').textContent = currentImage.name;
                document.getElementById('image-size').textContent = currentImage.size;
                infoElement.style.display = 'flex';
                
                // 重置缩放
                this.resetZoom();
                
                // 保存当前状态
                this.saveCurrentState();
            },
            
            // 标记当前图片为已记住
            rememberCurrent: function() {
                if (this.unrememberedImages.length === 0) return;
                
                const currentImage = this.unrememberedImages[this.currentImageIndex];
                currentImage.remembered = true;
                
                // 更新数据库
                const transaction = this.db.transaction(['images'], 'readwrite');
                const store = transaction.objectStore('images');
                
                store.put(currentImage);
                
                // 更新内存状态
                this.rememberedImages.push(currentImage);
                this.unrememberedImages.splice(this.currentImageIndex, 1);
                
                // 如果还有未记住的图片，显示下一张
                if (this.unrememberedImages.length > 0) {
                    this.currentImageIndex = this.currentImageIndex % this.unrememberedImages.length;
                    this.showCurrentImage();
                } else {
                    this.currentImageIndex = 0;
                    this.showCurrentImage(); // 会显示完成消息
                }
                
                this.updateUI();
            },
            
            // 标记当前图片为未记住（跳过）
            forgetCurrent: function() {
                if (this.unrememberedImages.length === 0) return;
                
                // 移动到未记住列表末尾
                const currentImage = this.unrememberedImages[this.currentImageIndex];
                this.unrememberedImages.splice(this.currentImageIndex, 1);
                this.unrememberedImages.push(currentImage);
                
                // 显示下一张图片
                this.currentImageIndex = 0;
                this.showCurrentImage();
                
                this.updateUI();
            },
            
            // 重置系统
            reset: function() {
                if (confirm('确定要重置系统吗？所有数据将被永久删除。')) {
                    const transaction = this.db.transaction(['images', 'status'], 'readwrite');
                    
                    // 清空图片数据
                    const imageStore = transaction.objectStore('images');
                    imageStore.clear();
                    
                    // 重置状态
                    const statusStore = transaction.objectStore('status');
                    statusStore.put({ name: 'currentIndex', value: 0 });
                    
                    transaction.oncomplete = () => {
                        this.allImages = [];
                        this.rememberedImages = [];
                        this.unrememberedImages = [];
                        this.currentImageIndex = 0;
                        
                        document.getElementById('image-placeholder').style.display = 'block';
                        document.getElementById('current-image').style.display = 'none';
                        document.getElementById('image-info').style.display = 'none';
                        document.getElementById('completion-message').style.display = 'none';
                        
                        this.updateUI();
                        alert('系统已重置！');
                    };
                }
            },
            
            // 导出数据
            exportData: function() {
                if (this.allImages.length === 0) {
                    alert('没有数据可导出');
                    return;
                }
                
                const data = {
                    allImages: this.allImages,
                    rememberedImages: this.rememberedImages,
                    unrememberedImages: this.unrememberedImages,
                    currentIndex: this.currentImageIndex,
                    timestamp: new Date().toISOString(),
                    savePath: this.savePath
                };
                
                const dataStr = JSON.stringify(data, null, 2);
                const dataBlob = new Blob([dataStr], {type: 'application/json'});
                
                const downloadLink = document.createElement('a');
                downloadLink.href = URL.createObjectURL(dataBlob);
                downloadLink.download = `${this.savePath.replace(/\//g, '_')}_${new Date().toISOString().slice(0,10)}.json`;
                downloadLink.click();
            },
            
            // 导入数据
            importData: function(file) {
                const reader = new FileReader();
                
                reader.onload = (e) => {
                    try {
                        const data = JSON.parse(e.target.result);
                        
                        if (!data.allImages) {
                            throw new Error('无效的数据格式');
                        }
                        
                        // 开始导入数据
                        const transaction = this.db.transaction(['images', 'status'], 'readwrite');
                        
                        // 清空现有数据
                        const imageStore = transaction.objectStore('images');
                        imageStore.clear();
                        
                        // 添加新数据
                        data.allImages.forEach(image => {
                            imageStore.add(image);
                        });
                        
                        // 更新状态
                        const statusStore = transaction.objectStore('status');
                        statusStore.put({ name: 'currentIndex', value: data.currentIndex || 0 });
                        
                        transaction.oncomplete = () => {
                            // 更新内存状态
                            this.allImages = data.allImages;
                            this.rememberedImages = data.rememberedImages || [];
                            this.unrememberedImages = data.unrememberedImages || [];
                            this.currentImageIndex = data.currentIndex || 0;
                            
                            // 更新保存路径
                            if (data.savePath) {
                                this.savePath = data.savePath;
                                document.getElementById('current-path-display').textContent = this.savePath;
                                document.getElementById('current-path-preview').textContent = this.savePath;
                            }
                            
                            this.updateUI();
                            
                            if (this.unrememberedImages.length > 0) {
                                this.showCurrentImage();
                            } else if (this.allImages.length > 0) {
                                document.getElementById('completion-message').style.display = 'block';
                            }
                            
                            alert(`数据导入成功！\n总图片: ${this.allImages.length}\n已记住: ${this.rememberedImages.length}\n未记住: ${this.unrememberedImages.length}`);
                        };
                    } catch (error) {
                        alert('导入失败: ' + error.message);
                    }
                };
                
                reader.readAsText(file);
            },
            
            // 更新UI状态
            updateUI: function() {
                document.getElementById('total-count').textContent = this.allImages.length;
                document.getElementById('remembered-count').textContent = this.rememberedImages.length;
                document.getElementById('unremembered-count').textContent = this.unrememberedImages.length;
                
                // 更新进度条
                const progress = this.allImages.length > 0 ? 
                    (this.rememberedImages.length / this.allImages.length) * 100 : 0;
                
                document.getElementById('progress-fill').style.width = `${progress}%`;
                document.getElementById('progress-percent').textContent = `${progress.toFixed(1)}%`;
            },
            
            // 图片缩放功能
            zoomIn: function() {
                this.currentScale = Math.min(this.currentScale + 0.2, 3);
                this.applyZoom();
            },
            
            zoomOut: function() {
                this.currentScale = Math.max(this.currentScale - 0.2, 0.5);
                this.applyZoom();
            },
            
            resetZoom: function() {
                this.currentScale = 1;
                this.applyZoom();
            },
            
            applyZoom: function() {
                const imgElement = document.getElementById('current-image');
                if (imgElement.style.display !== 'none') {
                    imgElement.style.transform = `scale(${this.currentScale})`;
                }
            },
            
            // 编辑图片
            editImage: function() {
                if (this.unrememberedImages.length === 0) return;
                
                const currentImage = this.unrememberedImages[this.currentImageIndex];
                const imgElement = document.getElementById('current-image');
                
                // 设置编辑画布
                const canvas = document.getElementById('edit-canvas');
                const ctx = canvas.getContext('2d');
                
                // 获取图片原始尺寸
                const img = new Image();
                img.onload = () => {
                    // 设置画布尺寸
                    const maxWidth = window.innerWidth * 0.9;
                    const maxHeight = window.innerHeight * 0.7;
                    
                    let width = img.width;
                    let height = img.height;
                    
                    // 按比例缩放以适应屏幕
                    if (width > maxWidth) {
                        height = (maxWidth / width) * height;
                        width = maxWidth;
                    }
                    
                    if (height > maxHeight) {
                        width = (maxHeight / height) * width;
                        height = maxHeight;
                    }
                    
                    canvas.width = width;
                    canvas.height = height;
                    
                    // 绘制图片到画布
                    ctx.drawImage(img, 0, 0, width, height);
                    
                    // 显示编辑面板
                    document.getElementById('edit-panel').style.display = 'flex';
                };
                img.src = currentImage.data;
            },
            
            // 保存编辑后的图片
            saveEditedImage: function() {
                const canvas = document.getElementById('edit-canvas');
                const dataURL = canvas.toDataURL('image/png');
                
                const currentImage = this.unrememberedImages[this.currentImageIndex];
                currentImage.data = dataURL;
                
                // 更新数据库
                const transaction = this.db.transaction(['images'], 'readwrite');
                const store = transaction.objectStore('images');
                
                store.put(currentImage);
                
                // 更新显示
                document.getElementById('current-image').src = dataURL;
                
                // 隐藏编辑面板
                document.getElementById('edit-panel').style.display = 'none';
                
                alert('图片编辑已保存！');
            }
        };
        
        // 初始化应用
        document.addEventListener('DOMContentLoaded', async () => {
            try {
                await imageManager.initDB();
                await imageManager.loadAllData();
            } catch (error) {
                console.error('初始化失败:', error);
                document.getElementById('db-status').textContent = '数据库状态: 初始化失败';
            }
            
            // 设置事件监听器
            setupEventListeners();
            
            // 设置手势缩放
            setupGestureZoom();
            
            // 设置图片编辑
            setupImageEditor();
        });
        
        // 设置事件监听器
        function setupEventListeners() {
            const fileUpload = document.getElementById('file-upload');
            const importData = document.getElementById('import-data');
            const rememberBtn = document.getElementById('remember-btn');
            const forgetBtn = document.getElementById('forget-btn');
            const editBtn = document.getElementById('edit-btn');
            const downloadBtn = document.getElementById('download-btn');
            const resetBtn = document.getElementById('reset-btn');
            const settingsBtn = document.getElementById('settings-btn');
            const closeSettings = document.getElementById('close-settings');
            const saveSettingsBtn = document.getElementById('save-settings-btn');
            const zoomInBtn = document.getElementById('zoom-in-btn');
            const zoomOutBtn = document.getElementById('zoom-out-btn');
            const resetZoomBtn = document.getElementById('reset-zoom-btn');
            const setCustomPathBtn = document.getElementById('set-custom-path');
            
            // 添加图片
            fileUpload.addEventListener('change', async (e) => {
                const files = e.target.files;
                if (files.length > 0) {
                    for (let i = 0; i < files.length; i++) {
                        if (files[i].type.startsWith('image/')) {
                            try {
                                await imageManager.addImage(files[i]);
                            } catch (error) {
                                console.error('添加图片失败:', error);
                            }
                        }
                    }
                }
                fileUpload.value = '';
            });
            
            // 导入数据
            importData.addEventListener('change', (e) => {
                const file = e.target.files[0];
                if (file && file.type === "application/json") {
                    imageManager.importData(file);
                } else if (file) {
                    alert('请选择有效的JSON文件');
                }
                importData.value = '';
            });
            
            // 记忆按钮
            rememberBtn.addEventListener('click', () => {
                imageManager.rememberCurrent();
            });
            
            // 忘记按钮
            forgetBtn.addEventListener('click', () => {
                imageManager.forgetCurrent();
            });
            
            // 编辑按钮
            editBtn.addEventListener('click', () => {
                imageManager.editImage();
            });
            
            // 导出按钮
            downloadBtn.addEventListener('click', () => {
                imageManager.exportData();
            });
            
            // 重置按钮
            resetBtn.addEventListener('click', () => {
                imageManager.reset();
            });
            
            // 设置按钮
            settingsBtn.addEventListener('click', () => {
                document.getElementById('settings-panel').style.display = 'flex';
            });
            
            // 关闭设置
            closeSettings.addEventListener('click', () => {
                document.getElementById('settings-panel').style.display = 'none';
            });
            
            // 保存设置
            saveSettingsBtn.addEventListener('click', () => {
                // 更新设置
                imageManager.settings.saveInterval = parseInt(document.getElementById('save-interval').value);
                imageManager.settings.imageQuality = document.getElementById('image-quality').value;
                
                // 保存设置
                imageManager.saveSettings();
                
                // 关闭设置面板
                document.getElementById('settings-panel').style.display = 'none';
                
                alert('设置已保存！');
            });
            
            // 路径选择
            document.querySelectorAll('.folder-option').forEach(option => {
                option.addEventListener('click', () => {
                    imageManager.setSavePath(option.dataset.path);
                });
            });
            
            // 自定义路径
            setCustomPathBtn.addEventListener('click', () => {
                const customPath = document.getElementById('custom-path').value;
                if (customPath) {
                    imageManager.setSavePath(customPath);
                    document.getElementById('custom-path').value = '';
                }
            });
            
            // 缩放按钮
            zoomInBtn.addEventListener('click', () => {
                imageManager.zoomIn();
            });
            
            zoomOutBtn.addEventListener('click', () => {
                imageManager.zoomOut();
            });
            
            resetZoomBtn.addEventListener('click', () => {
                imageManager.resetZoom();
            });
        }
        
        // 设置手势缩放功能
        function setupGestureZoom() {
            const imgElement = document.getElementById('current-image');
            let initialDistance = null;
            
            imgElement.addEventListener('touchstart', (e) => {
                if (e.touches.length === 2) {
                    e.preventDefault();
                    initialDistance = Math.hypot(
                        e.touches[0].clientX - e.touches[1].clientX,
                        e.touches[0].clientY - e.touches[1].clientY
                    );
                }
            });
            
            imgElement.addEventListener('touchmove', (e) => {
                if (e.touches.length === 2 && initialDistance !== null) {
                    e.preventDefault();
                    const currentDistance = Math.hypot(
                        e.touches[0].clientX - e.touches[1].clientX,
                        e.touches[0].clientY - e.touches[1].clientY
                    );
                    
                    const scaleFactor = currentDistance / initialDistance;
                    imageManager.currentScale = Math.max(0.5, Math.min(imageManager.currentScale * scaleFactor, 3));
                    imageManager.applyZoom();
                    
                    initialDistance = currentDistance;
                }
            });
            
            imgElement.addEventListener('touchend', () => {
                initialDistance = null;
            });
        }
        
        // 设置图片编辑器
        function setupImageEditor() {
            const canvas = document.getElementById('edit-canvas');
            const ctx = canvas.getContext('2d');
            const colorPicker = document.getElementById('color-picker');
            const colorPreview = document.getElementById('color-preview');
            const toolSize = document.getElementById('tool-size');
            const textInputContainer = document.getElementById('text-input-container');
            const textInput = document.getElementById('text-input');
            const addTextBtn = document.getElementById('add-text-btn');
            const closeEditBtn = document.getElementById('close-edit');
            const cancelEditBtn = document.getElementById('cancel-edit-btn');
            const saveEditBtn = document.getElementById('save-edit-btn');
            
            let isDrawing = false;
            let lastX = 0;
            let lastY = 0;
            let currentTool = 'pencil';
            let fontSize = 20;
            
            // 颜色选择器事件
            colorPicker.addEventListener('input', () => {
                colorPreview.style.backgroundColor = colorPicker.value;
            });
            
            // 工具按钮事件
            document.querySelectorAll('.tool-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    // 移除所有激活状态
                    document.querySelectorAll('.tool-btn').forEach(b => b.classList.remove('active'));
                    
                    // 设置当前激活工具
                    this.classList.add('active');
                    currentTool = this.id.replace('tool-', '');
                    
                    // 显示/隐藏文本输入框
                    if (currentTool === 'text') {
                        textInputContainer.style.display = 'block';
                    } else {
                        textInputContainer.style.display = 'none';
                    }
                });
            });
            
            // 添加文本按钮
            addTextBtn.addEventListener('click', () => {
                if (textInput.value.trim() !== '') {
                    ctx.font = `${fontSize}px Arial`;
                    ctx.fillStyle = colorPicker.value;
                    ctx.fillText(textInput.value, canvas.width / 2, canvas.height / 2);
                    textInput.value = '';
                }
            });
            
            // 关闭编辑面板
            closeEditBtn.addEventListener('click', () => {
                document.getElementById('edit-panel').style.display = 'none';
            });
            
            // 取消编辑
            cancelEditBtn.addEventListener('click', () => {
                document.getElementById('edit-panel').style.display = 'none';
            });
            
            // 保存编辑
            saveEditBtn.addEventListener('click', () => {
                imageManager.saveEditedImage();
            });
            
            // 鼠标事件处理
            canvas.addEventListener('mousedown', startDrawing);
            canvas.addEventListener('mousemove', draw);
            canvas.addEventListener('mouseup', stopDrawing);
            canvas.addEventListener('mouseout', stopDrawing);
            
            // 触摸事件处理
            canvas.addEventListener('touchstart', handleTouchStart);
            canvas.addEventListener('touchmove', handleTouchMove);
            canvas.addEventListener('touchend', stopDrawing);
            
            function startDrawing(e) {
                isDrawing = true;
                const rect = canvas.getBoundingClientRect();
                lastX = e.clientX - rect.left;
                lastY = e.clientY - rect.top;
                
                if (currentTool === 'text') {
                    // 文本工具不需要连续绘制
                    return;
                }
                
                // 如果是矩形或圆形，开始绘制形状
                if (currentTool === 'rect' || currentTool === 'circle') {
                    // 保存当前画布状态
                    ctx.save();
                    return;
                }
            }
            
            function draw(e) {
                if (!isDrawing) return;
                
                const rect = canvas.getBoundingClientRect();
                const currentX = e.clientX - rect.left;
                const currentY = e.clientY - rect.top;
                
                ctx.strokeStyle = colorPicker.value;
                ctx.lineWidth = toolSize.value;
                ctx.lineCap = 'round';
                ctx.lineJoin = 'round';
                
                switch(currentTool) {
                    case 'pencil':
                        ctx.beginPath();
                        ctx.moveTo(lastX, lastY);
                        ctx.lineTo(currentX, currentY);
                        ctx.stroke();
                        break;
                        
                    case 'arrow':
                        drawArrow(ctx, lastX, lastY, currentX, currentY);
                        break;
                        
                    case 'rect':
                        // 矩形工具在鼠标释放时绘制
                        break;
                        
                    case 'circle':
                        // 圆形工具在鼠标释放时绘制
                        break;
                        
                    case 'eraser':
                        ctx.save();
                        ctx.globalCompositeOperation = 'destination-out';
                        ctx.beginPath();
                        ctx.moveTo(lastX, lastY);
                        ctx.lineTo(currentX, currentY);
                        ctx.stroke();
                        ctx.restore();
                        break;
                }
                
                lastX = currentX;
                lastY = currentY;
            }
            
            function stopDrawing() {
                isDrawing = false;
                
                if (currentTool === 'rect' || currentTool === 'circle') {
                    // 恢复画布状态（清除临时绘制）
                    ctx.restore();
                }
            }
            
            function handleTouchStart(e) {
                e.preventDefault();
                const touch = e.touches[0];
                const mouseEvent = new MouseEvent('mousedown', {
                    clientX: touch.clientX,
                    clientY: touch.clientY
                });
                canvas.dispatchEvent(mouseEvent);
            }
            
            function handleTouchMove(e) {
                e.preventDefault();
                const touch = e.touches[0];
                const mouseEvent = new MouseEvent('mousemove', {
                    clientX: touch.clientX,
                    clientY: touch.clientY
                });
                canvas.dispatchEvent(mouseEvent);
            }
            
            // 绘制箭头函数
            function drawArrow(ctx, fromX, fromY, toX, toY) {
                const headLength = 15;
                const angle = Math.atan2(toY - fromY, toX - fromX);
                
                // 绘制线条
                ctx.beginPath();
                ctx.moveTo(fromX, fromY);
                ctx.lineTo(toX, toY);
                ctx.stroke();
                
                // 绘制箭头头部
                ctx.beginPath();
                ctx.moveTo(toX, toY);
                ctx.lineTo(
                    toX - headLength * Math.cos(angle - Math.PI / 6),
                    toY - headLength * Math.sin(angle - Math.PI / 6)
                );
                ctx.lineTo(
                    toX - headLength * Math.cos(angle + Math.PI / 6),
                    toY - headLength * Math.sin(angle + Math.PI / 6)
                );
                ctx.closePath();
                ctx.fillStyle = colorPicker.value;
                ctx.fill();
            }
        }
    </script>
</body>
</html>